<template>
	<view class="content">
		<pyh-nv :config="config"></pyh-nv>
		<view class="headBox">
			<text class="title">{{content.title}}</text>
			<text class="time">发布时间 ：{{content.create_time}}</text>
			<image :src="baseurl+'association/share.png'" class="share"></image>
			<button open-type="share" class="shareBtn"></button>
		</view>
		<view class="userBox">
			<image :src="content.user.avatar" class="avatar"></image>
			<text class="name">{{content.user.nickname}}</text>
			<!-- <image :src="baseurl+'association/icon5.png'" class="badge"></image> -->
		</view>
		<view class="infoBox">
			<mp-html :content="content.content" />
		</view>
		<!-- 用户自己发的帖子 -->
		<view class="imgBox" >
			<image :src="item.image" mode="widthFix" v-for="(item,index) in content.images" :key="index"></image>
		</view>
		<view class="viewBox">
			<image :src="baseurl+'association/icon9.png'" class="eye"></image>
			<text class="viewNum black">阅读：{{content.read_num}}</text>
			<image :src="baseurl+'association/vote.png'" class="vote"></image>
			<text class="viewNum black">点赞：{{content.like}}</text>
			<image :src="baseurl+'association/msg.png'" class="msg"></image>
			<text class="viewNum black">回复：{{content.comment}}</text>
		</view>
		<!-- 评论 -->
		<view class="commentBox">
			<text class="total">共{{content.comment}}条评论</text>
			<view class="commentItem" v-for="(item,index) in commentArr" :key="index">
				<view class="userBox" style="margin-left: 0;">
					<image :src="item.avatar" class="avatar"></image>
					<text class="name">{{item.nickname}}</text>
					<image :src="ite.icon_url" v-for="(ite,ind) in item.medal" :key="ind" class="badge"></image>
				</view>
				<text class="comment">{{item.comment}}</text>
				<view class="timeBox">
					<text class="time">{{item.create_time}}</text>
					<text class="replyBtn">回复</text>
				</view>
				<view class="expandBox" v-if="item.child.length>0">
					<text class="expand">展开评论</text>
					<image :src="baseurl+'association/arrowDown.png'" class="arrowDown"></image>
				</view>
				<!-- 子评论 -->
				<view class="commentChildren" v-if="item.child.length>0">
					<view class="userBox" style="margin-left: 0;">
						<image :src="baseurl+'association/headBg.jpg'" class="avatar"></image>
						<text class="name"></text>
						<image :src="baseurl+'association/icon5.png'" class="badge"></image>
					</view>
					<text
						class="comment1"></text>
					<view class="timeBox">
						<text class="time"></text>
						<text class="replyBtn">回复</text>
					</view>
					<view class="expandBox">
						<text class="expand">收起</text>
						<image :src="baseurl+'association/arrowUp.png'" class="arrowUp"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="bottomBox">
			<view class="bottomMenuBox">
				<input type="text" class="input" placeholder="请友善回复" v-model="msg" />
				<!-- <image :src="baseurl+'association/msg1.png'" class="msg1"></image>
				<text class="label">发送</text> -->
				<view class="send" @click="comment">
					发送
				</view>
				<image :src="baseurl+'association/follow.png'" v-if="content.is_follow==0" class="follow"
					@click="follow(1)"></image>
				<image :src="baseurl+'association/followed.png'" v-else class="follow" @click="follow(0)"></image>
				<text class="label">关注</text>
				<image :src="baseurl+'project/vote.png'" class="vote1" v-if="content.is_like==0" @click="vote(1)"></image>
				<image :src="baseurl+'project/voted.png'" class="vote1" v-else  @click="vote(0)"></image>
				<text class="label">点赞</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				config: {
					title: ' ',
					bgColor: 'transparent',
					color: '#000000',
				},
				id: '',
				content: '',
				msg: '',
				commentArr: []
			}
		},
		onLoad(options) {
			// 帖子详情
			this.id = options.id;
			this.$request.get(`community/detail?id=${this.id}`).then(res => {
				this.content = res.data.data;
			})
			//获取文章评论
			this.$request.get(`CommunityComment/lists?article_id=${this.id}`).then(res => {
				this.commentArr = res.data.data.list;
			})
		},
		// 分享微信好友
		onShareAppMessage() {
			return {
				title: this.content.title, //分享标题 这个可以根据业务需求去定义
				path: '/packageB/post_info/post_info'
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: this.content.title, //分享标题 这个可以根据业务需求去定义
				path: '/packageB/post_info/post_info'
			}
		},
		methods: {
			//评论文章
			comment(id) {
				this.$request.post(`CommunityComment/add`, {
					article_id: this.id,
					pid: '',
					comment: this.msg
				}).then(res => {
					console.log(res);
					if (res.data.code > 0) {
						this.$u.toast('回复成功')
					} else {
						this.$u.toast(res.data.msg);
					}
				})
			},
			follow(num) {
				this.$request.post(`community/follow`, {
					article_id: this.id,
					status: num
				}).then(res => {
					console.log(res);
					if (res.data.code > 0) {
						if (this.content.is_follow == 0) {
							this.$u.toast('关注成功')
							this.content.is_follow = 1;
						} else {
							this.$u.toast('取消关注')
							this.content.is_follow = 0;
						}
					} else {
						this.$u.toast(res.data.msg);
					}
				})
			},
			vote(num) {
				this.$request.post(`community/giveLike`, {
					id: this.content.id,
					type: 1,
					status:num
				}).then(res => {
					console.log(res);
					if (res.data.code > 0) {
						if (this.content.is_like == 0) {
							this.$u.toast('点赞成功')
							this.content.is_like = 1;
						} else {
							this.$u.toast('取消点赞')
							this.content.is_like = 0;
						}
					} else {
						this.$u.toast(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.imgBox{
		display: flex;
		justify-content: center;
	}
	.send {
		width: 100rpx;
		height: 56rpx;
		background: #428A9A;
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
		z-index: 9;
		margin-left: 20rpx;
	}

	.mpHtml {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 30rpx;
	}

	.bottomBox {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 160rpx;
		background-color: #fff;
		border-top: 1rpx solid #919191;

		.bottomMenuBox {
			margin-left: 40rpx;
			margin-top: 15rpx;
			display: flex;
			align-items: center;

			.vote1 {
				width: 34rpx;
				height: 35rpx;
				margin-left: 30rpx;
			}

			.msg1 {
				width: 32rpx;
				height: 30rpx;
				margin-left: 20rpx;
			}

			.follow {
				width: 32rpx;
				height: 30rpx;
				margin-left: 30rpx;
			}

			.label {
				margin-left: 15rpx;
				font-size: 22rpx;
				font-weight: 500;
			}

			.input {
				width: 307rpx;
				height: 70rpx;
				background-color: #F6F6F6;
				border-radius: 35rpx;
				text-align: center;
			}
		}
	}

	.commentBox {
		margin-top: 95rpx;
		margin-left: 40rpx;
		margin-bottom: 150rpx;
		.commentItem {
			display: flex;
			flex-direction: column;

			.commentChildren {
				margin-left: 90rpx;
			}

			.expandBox {
				margin-left: 90rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #919191;
				display: flex;
				margin-top: 27rpx;
				align-items: center;

				.arrowDown,
				.arrowUp {
					width: 20rpx;
					height: 12rpx;
					margin-left: 15rpx;
				}
			}

			.timeBox {
				margin-left: 90rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #919191;
				display: flex;
				margin-top: 27rpx;

				.replyBtn {
					margin-left: 33rpx;
				}
			}

			.comment1 {
				width: 490rpx;
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 90rpx;
			}

			.comment {
				width: 580rpx;
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 90rpx;
			}
		}

		.total {
			font-size: 24rpx;
			font-weight: 500;
			color: #919191;
		}
	}

	.viewBox {
		margin-top: 70rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.msg {
			width: 24rpx;
			height: 22rpx;
			margin-left: 45rpx;
		}

		.vote {
			width: 22rpx;
			height: 20rpx;
			margin-left: 45rpx;
		}

		.eye {
			width: 20rpx;
			height: 14rpx;
		}

		.viewNum {
			font-size: 20rpx;
			font-weight: 500;
			margin-left: 18rpx;
		}
	}

	.infoBox {
		margin-top: 35rpx;
		margin-left: 40rpx;
		width: 670rpx;
	}

	.userBox {
		margin-top: 35rpx;
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.badge {
			width: 40rpx;
			height: 32rpx;
			margin-left: 23rpx;
		}

		.name {
			font-size: 24rpx;
			font-weight: 700;
			margin-left: 32rpx;
		}

		.avatar {
			width: 65rpx;
			height: 65rpx;
			border-radius: 50%;
		}
	}

	.headBox {
		position: relative;
		width: 750rpx;
		height: 366rpx;
		background: url('https://miantou.guguan.net/img/association/postInfoHead.png');
		background-size: 100% 100%;

		.shareBtn {
			position: absolute;
			width: 127rpx;
			height: 56rpx;
			bottom: 33rpx;
			right: 36rpx;
			opacity: 0;
		}

		.share {
			position: absolute;
			width: 127rpx;
			height: 56rpx;
			bottom: 33rpx;
			right: 36rpx;
		}

		.time {
			position: absolute;
			font-size: 22rpx;
			font-weight: 500;
			color: #fff;
			top: 295rpx;
			left: 40rpx;
		}

		.title {
			position: absolute;
			font-size: 36rpx;
			font-weight: 700;
			color: #fff;
			top: 225rpx;
			left: 40rpx;
		}
	}

	/deep/ .pyh-nv-box {
		position: fixed !important;
		top: 0;
		z-index: 999;
	}

	.content {
		position: relative;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		overflow-y: scroll;
	}
</style>